<%--
  Created by IntelliJ IDEA.
  User: 29688
  Date: 2021/4/1
  Time: 12:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设置我的资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.5.7/style/admin.css"
          media="all">
    <script src="${pageContext.request.contextPath}/layui-v2.5.7/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">发布书籍信息</div>
                <div class="layui-card-body" pad15>
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">书名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="bname" class="layui-input">
                            </div>
                        </div>
                        <input name="uid" value="${sessionScope.user.uid}" hidden>
                        <div class="layui-form-item">
                            <label class="layui-form-label">书籍类型</label>
                            <div class="layui-form-item layui-inline">
                                <div class="layui-input-block" id="typeList" style="margin-left: 0">
                                    <%--书籍类型部分--%>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">单价</label>
                            <div class="layui-input-inline">
                                <input type="text" name="price" lay-verify="number" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="count" lay-verify="number" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">描述信息</label>
                            <div class="layui-input-block">
                                <textarea name="description" placeholder="请输入描述信息" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图片</label>
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button type="button" class="layui-btn" id="uploadUserInfo">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="button" value="提交审核" class="layui-btn" lay-submit lay-filter="update">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html">
    <img src="${sessionScope.userInfo.url}" id="userPicture">
</script>
<script>
    /*书籍类型列表渲染*/
    gg();
    function gg() {
        var type =${type};
        if (type != null) {
            console.log("good")
            console.log(type)
            console.log(type.length)
            console.log(type[1].tid)
            var html = ''
            for (let i = 0; i < type.length; i++) {
                html += '<input type="checkbox"  value= "' + type[i].tid + '" title="' + type[i].tname + '">'
            }
            console.log(html)
            $("#typeList").html(html)
        }
    }
    layui.use(['form', 'upload', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;
        var uploadInst = upload.render({
            elem: '#uploadUserInfo' //绑定元素
            , url: '/user/book/bookUrl' //上传接口
            , done: function (res) {
                if (res === 1) {
                    layer.msg("文件上传成功！");
                }
            }
            , error: function () {
                //请求异常回调
            }
        });


        form.on('submit(update)', function (data) {
            var bookTypes = [0]
            /*获取所复选框*/
            $('#typeList input[type=checkbox]:checked').each(function () {
                bookTypes.push(parseInt($(this).val()))
            })
            data.field.ids=bookTypes
            console.log(data)
            $.ajax({
                url: "/user/book/add",
                type: "post",
                data: data.field,
                traditional:true,
                success: function (data) {
                    if (data === 0) {
                        layer.msg("未知错误！")
                    } else {
                        layer.msg("保存成功！")
                    }
                }
            })
        })
    });

</script>

</body>

</html>


